<!-- <template>
  <div>
    <li class="li-item" data-index="20" v-for="item in menuList" :key="item.id">
      <div @click="rightliClick('{{ item.type }}')">{{ item.text }}</div>
    </li>
  </div>
</template>
<script>
export default {
  name:"Menu",
  data() {
    return {
      menuList: [
        {
          id: 1,
          text: '显示设备详情',
          type: 'detail',
        },
        {
          id: 2,
          text: '删除',
          type: 'delete',
        },
        // {
        //   text: '开启深度监测',
        //   type: 'opendepth',
        // },
        // {
        //   text: '关闭深度监测',
        //   type: 'closedepth',
        // },
      ],
    };
  },
  mounted: {},
  methods: {
    rightliClick() {
        var divs = document.querySelectorAll('.contextmenu');
        cesiumContainer.removeChild(divs[0]);
        switch (type) {
          case 'detail':
            console.log('detail...');
            break;
          case 'opendepth':
            viewer.scene.globe.depthTestAgainstTerrain = true;
            break;
          case 'closedepth':
            viewer.scene.globe.depthTestAgainstTerrain = false;
            break;
          case 'delete':
            console.log('delete...');
            var entity = viewer.entities.getById(entitiesId);
            if (entity != undefined) {
              viewer.entities.remove(entity);
            }
            break;
          case 'cesiumObj':
            var entity = viewer.entities.getById(entitiesId);
            if (entity != undefined) {
              viewer.entities.remove(entity);
            }
            break;
        }
}
  },
};
</script>
<style lang="scss" scoped>
.li-item{
  position: absolute;
  top: 13px;
  left: 297px;
  width: 250px;
  background-color: #f10f0f;
  border-radius: 4px;
  overflow: hidden;
  color: #ffffff;
}
</style> -->